<template>
    <div>
        <TopLink></TopLink>
        <div class="top">
            <span>聊聊你的观影感受</span>
            <div>
                <p>极速下载</p>
                <p>打开</p>
            </div>
        </div>
        <div class="details">
           <div class="xqtop">
                <div class="jieshao">
                    <p>{{arr.title}}</p>
                    <span>{{arr.pubdates[1]}}/{{arr.genres[0]}}</span>
                    <b>用App查看影人资料</b>
                </div>
                    <div class="img">
                    <img :src=arr.images.large alt="">
                </div>
           </div>
           <div class="btn">
                <p>想看</p>
                <p>看过</p>
           </div>
           <div class="jianjie">
                <p>{{arr.title}}的简介</p>
                <p>{{arr.summary}}</p>
           </div>
           <div class="more">
                <span>查看更多分类</span>
                <div class="bq">
                    <p>{{arr.tags[0]}}</p>
                    <p>{{arr.tags[1]}}</p>
                    <p>{{arr.tags[3]}}</p>
                </div>
           </div>
           <div>
             <div class="haibao">
                <p>{{arr.title}}的图片</p>
                <div>
                    <li v-for="(v,i) in arr.photos" :key="i">
                        <img :src=v.thumb alt="">
                    </li>
                </div>
            </div>
                <div class="comments">
                    <p>{{arr.title}}的评论</p>
                    <comment :Fu="arrb"></comment>
                </div>
           </div>
        </div>
    </div>
</template>
<script>
import TopLink from "@/components/toplink/toplink.vue"
import Comment from "./comment/comment.vue"
export default {
    components:{
        TopLink,
        Comment
       
    },
    
    data() {
        return {
            arr:[],
            arrb:[]
        }
    },
    mounted() {
        this.axios({
            url:"/api/v2/movie/subject/"+this.$route.params.shuju,
            method:"get"
        }).then((res)=>{
            // console.log(res.data)
            this.arr=res.data
            this.arrb=res.data.popular_comments
        })
    },
}
</script>
<style  scoped>
.top{
    width: 2.47rem;
    height: 0.52rem;
    background: #ecf9ef;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.12rem;
}
.top>div{
    display: flex;
    justify-content: space-around;
}
.top>div>p{
    margin-right: 0.05rem;
}
.top>div>p:first-child{
    width: 0.56rem;
    height: 0.14rem;
    background: #42bd56;
    color: #fff;
    line-height: 0.14rem;
}
.top>div>p:last-child{
    width: 0.3rem;
    height: 0.13rem;
    line-height: 0.13rem;
    border: 0.01rem solid #42bd56;
    text-align: center;
    color: #42bd56;
}
.top span{
    color: #42bd56;
}
.details{
    height: 3.95rem;
    width: 2.25rem;
    margin:0 auto ;
}
.xqtop{
    display: flex;
    justify-content: space-between;
    margin-top: 0.09rem;
}
.jieshao{
    width: 1.5rem;
    display: flex;
    flex-direction: column;
}
.jieshao p{
    font-weight: bolder;
}

.jieshao b{
    color: #42bd56;
}
.img{
    height: 0.85rem;
    width: 0.6rem;
}
.img img{
    width: 100%;
    height: 100%;
}
.btn{
    height: 0.56rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.btn p{
    width: 0.18rem;
    width: 1.06rem;
    border: 0.01rem solid #ffb712;
    text-align: center;
    color: #ffb712;
}
.jianjie p:last-child{
    margin-top: 0.1rem;
    height: 0.45rem;
    width: 2.24rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.more{
    display: flex;
    flex-direction: column;
}
.bq{
    display: flex;
    width: 1rem;
    height: 0.5rem;
    align-items: center;
    justify-content: space-around;
}
.bq p{
    width: 0.29rem;
    height: 0.16rem;
    background: #f6f6f6;
    color: #494949;
}
.haibao{
    display: flex;
    flex-direction: column;
    width: 2.38rem;
}
.haibao>div{
    width: 2.38rem;
    height: 0.9rem;
    overflow-x: auto;
    display: flex;

}
.haibao>div li{
    height: 0.9rem;
    width: 1.08rem;  
    margin-right: 0.05rem;
}
.haibao>div img{
    height: 0.9rem;
    width: 1.08rem;
}
.comments{
    margin-top: 0.2rem;
}
.comments>p{
    margin-bottom: 0.13rem;
}
</style>